<template>
    <div class="swiperBox">
        <swiper :slides-per-view="1" :navigation="navigation" :modules="modules" :thumbs="{ swiper: thumbsSwiper }" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
            <swiper-slide v-if="video != null"> <video controls :src="video" width="434" height="322"></video></swiper-slide>
            <swiper-slide v-for="(item,index) in picList" :key="index">
                <img :src="item" alt="">
            </swiper-slide>
        </swiper>
        <div class="thumbBlock">
            <div class="arrow-l"><img src="@/assets/img/icon_left_not-clickable@2x.png" alt=""></div>
            <swiper :modules="[Thumbs]" :slides-per-view="4" watch-slides-progress @swiper="setThumbsSwiper" :space-between="10">
                <swiper-slide v-for="(item,index) in picList" :key="index" class="thumb_item"> <img :src="item" alt=""></swiper-slide>

            </swiper>
            <div class="arrow-r"><img src="@/assets/img/icon_right_clickable@2x.png" alt=""></div>
        </div>
    </div>
</template>
<script >
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Scrollbar, A11y, Autoplay, Thumbs } from 'swiper/modules'
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';

export default {
    props: {
        picList: Array,
        video: String
    },
    components: {
        Swiper,
        SwiperSlide,
    },
    setup (props) {
        const onSwiper = (swiper) => {
            console.log(swiper);
        };
        const onSlideChange = (isActive) => {
            console.log(isActive);
        };
        const thumbsSwiper = ref(null);
        const setThumbsSwiper = (swiper) => {
            thumbsSwiper.value = swiper;
        };
        const navigation = ref({
            nextEl: ".arrow-r",
            prevEl: ".arrow-l",
        });
        return {
            onSwiper,
            onSlideChange,
            modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay, Thumbs],
            Thumbs,
            thumbsSwiper,
            navigation,
            setThumbsSwiper,
        };
    },
};
</script>
<style lang="less" scoped>
.swiperBox {
    width: 434px;

    .swiper {
        display: flex;
        .swiper-slide {
            width: 434px;
            height: 322px;
        }
    }
    .thumbBlock {
        // width: 390px;
        width: 434px;
        display: flex;
        margin-top: 18px;
        .arrow-l,
        .arrow-r {
            width: 12px;
            height: 68px;
            cursor: pointer;
        }
        .swiper {
            width: 390px;
            margin-right: 10px;
        }
        .arrow-l {
            margin-right: 10px;
        }
        .thumb_item {
            height: 68px;
            opacity: 0.7;
        }
        .swiper-slide-thumb-active {
            opacity: 1;
        }
    }
}
</style>